<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css"/>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script>
    <title>我的订单</title>
    <style type="text/css">
        .order {
            position: relative;
            width: 94%;
            height: 2.1rem;
            background: #EFEFEF;
            margin: 0rem auto 0.2rem;
            padding-top: 0.2rem;
            border-radius: 0.1rem;
        }

        .order p {
            font-size: 0.3rem;
            line-height: 0.5rem;
            padding-left: 0.2rem;
            position: relative;
            z-index: 2;
        }

        img {
            width: 1.8rem;
            position: absolute;
            right: 0.2rem;
            top: 0.2rem;
        }

        span {
            display: inline-block;
            position: absolute;
            right: 0.2rem;
            font-size: 0.28rem;
            bottom: 0.2rem;
        }
    </style>
</head>
<body>
<br/>
<div id="orders">
</div>
</body>
<script type="text/javascript">
    var order = "";
    $.ajax({
        url: "/orders/getOrdersByMobile",
        type: 'get',
        dataType: 'json',
        success: function (data) {
            console.log(data);
            for (let i = 0; i < data.orders.length; i++) {
                order += "<div class='order'>";
                order += "<p>联系电话：" + data.orders[i].phone + "</p>";
                if (data.orders[i].customer.car == null || data.orders[i].customer.car == ''){
                    order += "<p>车牌号:  无车辆信息  </p>";
                }else{
                    order += "<p>车牌号:  "+ data.orders[i].customer.car +"  </p>";
                }

                order += "<p>地址：" + data.orders[i].address + "</p>";
                order += "<p>￥：" + data.orders[i].cost + "元</p>";
                if (data.orders[i].status == '5') {
                    order += "<img src=\"/static/img/icon10.png\" alt=\"\" /></div>";
                } else {
                    order += "<img src=\"/static/img/icon9.png\" alt=\"\" /></div>";
                }
            }
            console.log(order)
            $("#orders").html(order);
        }
    });

</script>
</html>
